@charset "UTF-8";
.btn-base {
  display: block;
  width: 120px;
  background: url("../img/lol-icon.png") no-repeat center;
  background-position: -260px 0;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  border-radius: 1px; }

/* css reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote，th, td {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

q:before, q:after {
  content: ' '; }

abbr, acronym {
  border: 0; }

/* 文字排版 */
.f12 {
  font-size: 12px; }

.f13 {
  font-size: 13px; }

.f14 {
  font-size: 14px; }

.f16 {
  font-size: 16px; }

.f20 {
  font-size: 20px; }

.fb {
  font-weight: bold; }

/* 定位 */
.pr {
  position: relative; }

.pa {
  position: absolute; }

.ib {
  display: inline-block; }

.abs-right {
  position: absolute;
  right: 0; }

.zoom {
  zoom: 1; }

.hidden {
  visibility: hidden; }

.none {
  display: none; }

.tc {
  display: table-cell; }

/* 长度高度 */
.w10 {
  width: 10px; }

.w20 {
  width: 20px; }

.w30 {
  width: 30px; }

.w40 {
  width: 40px; }

.w50 {
  width: 50px; }

.w60 {
  width: 60px; }

.w70 {
  width: 70px; }

.w80 {
  width: 80px; }

.w90 {
  width: 90px; }

.w100 {
  width: 100px; }

.w200 {
  width: 200px; }

.w300 {
  width: 300px; }

.w400 {
  width: 400px; }

.w500 {
  width: 500px; }

.w600 {
  width: 600px; }

.w700 {
  width: 700px; }

.w800 {
  width: 800px; }

.w {
  width: 100%; }

.h50 {
  height: 50px; }

.h80 {
  height: 80px; }

.h100 {
  height: 100px; }

.h200 {
  height: 200px; }

.h {
  height: 100%; }

/* 边距 */
.m10 {
  margin: 10px; }

.m15 {
  margin: 15px; }

.m30 {
  margin: 30px; }

.mt5 {
  margin-top: 5px; }

.mt10 {
  margin-top: 10px; }

.mt15 {
  margin-top: 15px; }

.mt20 {
  margin-top: 20px; }

.mt30 {
  margin-top: 30px; }

.mt50 {
  margin-top: 50px; }

.mt100 {
  margin-top: 100px; }

.mb5 {
  margin-bottom: 5px; }

.mb10 {
  margin-bottom: 10px; }

.mb15 {
  margin-bottom: 15px; }

.mb20 {
  margin-bottom: 20px; }

.mb30 {
  margin-bottom: 30px; }

.mb40 {
  margin-bottom: 40px; }

.mb50 {
  margin-bottom: 50px; }

.mb85 {
  margin-bottom: 85px; }

.mb90 {
  margin-bottom: 90px; }

.mb100 {
  margin-bottom: 100px; }

.mb150 {
  margin-bottom: 150px; }

.ml5 {
  margin-left: 5px; }

.ml10 {
  margin-left: 10px; }

.ml15 {
  margin-left: 15px; }

.ml20 {
  margin-left: 20px; }

.ml30 {
  margin-left: 30px; }

.ml40 {
  margin-left: 40px; }

.ml50 {
  margin-left: 50px; }

.ml100 {
  margin-left: 100px; }

.mr5 {
  margin-right: 5px; }

.mr10 {
  margin-right: 10px; }

.mr15 {
  margin-right: 15px; }

.mr20 {
  margin-right: 20px; }

.mr30 {
  margin-right: 30px; }

.mr40 {
  margin-right: 40px; }

.mr50 {
  margin-right: 50px; }

.mr100 {
  margin-right: 100px; }

.p10 {
  padding: 10px; }

.p15 {
  padding: 15px; }

.p30 {
  padding: 30px; }

.pt5 {
  padding-top: 5px; }

.pt10 {
  padding-top: 10px; }

.pt15 {
  padding-top: 15px; }

.pt20 {
  padding-top: 20px; }

.pt30 {
  padding-top: 30px; }

.pt50 {
  padding-top: 50px; }

.pt100 {
  padding-top: 100px; }

.pb5 {
  padding-bottom: 5px; }

.pb10 {
  padding-bottom: 10px; }

.pb15 {
  padding-bottom: 15px; }

.pb20 {
  padding-bottom: 20px; }

.pb30 {
  padding-bottom: 30px; }

.pb50 {
  padding-bottom: 50px; }

.pb100 {
  padding-bottom: 100px; }

.pl5 {
  padding-left: 5px; }

.pl10 {
  padding-left: 10px; }

.pl15 {
  padding-left: 15px; }

.pl20 {
  padding-left: 20px; }

.pl30 {
  padding-left: 30px; }

.pl50 {
  padding-left: 50px; }

.pl100 {
  padding-left: 100px; }

.pr5 {
  padding-right: 5px; }

.pr10 {
  padding-right: 10px; }

.pr15 {
  padding-right: 15px; }

.pr20 {
  padding-right: 20px; }

.pr30 {
  padding-right: 30px; }

.pr50 {
  padding-right: 50px; }

.pr100 {
  padding-right: 100px; }

.lol-league-modal {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #3dbad1;
  border-radius: 0px;
  outline: 0;
  -webkit-box-shadow: 0px 0px 0px 5px rgba(196, 234, 241, 0.8);
  box-shadow: 0px 0px 0px 5px rgba(196, 234, 241, 0.8); }

.lol-league-formElement {
  border: 1px solid #d7dde4;
  border-radius: 1px;
  box-shadow: inset 0 1px 1px transparent;
  -webkit-box-shadow: inset 0 1px 1px transparent; }

/*顶部二级导航条*/
#bodyer {
  background: url("../img/lol-bg.jpg") no-repeat top center;
  padding: 0 0 20px 0; }

.lol-league-nav {
  height: 50px;
  background: rgba(30, 33, 36, 0.7); }

.lol-league-nav .active {
  background: #16b2ce; }

.lol-league-nav li {
  display: inline-block;
  padding: 0 22px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #fff; }

.lol-league-nav li + li {
  margin-left: 100px; }

/*Globel color*/
.yellowFont {
  color: #ff8400; }

.greenFont {
  color: #00a686; }

/* Globel Border */
.statement-left {
  float: left;
  width: 172px;
  height: 182px;
  background: #d7dde4;
  margin-right: 20px; }

.wrapper-main {
  float: left;
  width: 770px; }

.wrapper-game-matching {
  padding: 20px;
  background: #fff;
  margin-top: 20px; }

.wrapper-user-right {
  float: right;
  width: 290px;
  padding: 20px;
  background: #fff;
  margin-top: 20px; }

.wrapper-statement {
  margin: 0 auto;
  margin-top: 15px;
  letter-spacing: 3px;
  line-height: 27px;
  text-align: center; }

.wrapper-statement p {
  color: #687580;
  font-size: 14px; }

.wrapper-statement p span {
  font-size: 24px;
  color: #ee4e10; }

.statement-center {
  width: 100%;
  display: block;
  padding: 10px 0; }

.statement-top h3 {
  font-size: 16px;
  color: #16b2ce;
  margin: 0;
  padding: 0; }

.statement-top h3 img {
  vertical-align: baseline; }

.statement-top p:last-child {
  color: #44474e;
  line-height: 30px;
  margin-bottom: 10px; }

.statement-top p span {
  margin-right: 30px; }

.statement-middle {
  margin-bottom: 15px; }

.statement-middle div {
  display: inline-block; }

.statement-middle div p:first-child {
  color: #687580;
  line-height: 27px; }

.score-style p:last-child {
  color: #ff8400;
  font-size: 14px; }

.statement-bottom p:last-child {
  color: #ff8400;
  font-size: 16px; }

.wrapper-border {
  height: 33px;
  border-right: 1px solid #d2e6ea;
  margin: 0 20px; }

.btn-apply {
  display: block;
  width: 120px;
  height: 34px;
  background: url("../img/lol-icon.png") no-repeat center;
  background-position: -260px -124px;
  font-size: 14px;
  color: #ffffff;
  line-height: 34px;
  margin: 20px auto 0;
  text-align: center; }

/* 用户登录 */
.wrapper-user-right {
  padding: 0; }

.user-intro {
  padding: 20px; }

.user-personal {
  width: 73%;
  margin-left: 10px; }

.user-name {
  margin-bottom: 2px; }

.user-gold {
  margin-top: 3px;
  color: #ff8400; }

.user-intro-middle {
  margin-top: 20px;
  color: #00a686; }

.border-green {
  border: 1px solid #00a686;
  width: 40px;
  margin-top: 9px; }

.selection {
  padding-top: 20px; }

.selection input {
  border: 1px solid #d7dde4;
  width: 100%;
  line-height: 35px;
  padding: 0 6px; }

.selection .create-name {
  margin-top: 10px; }

/* 我的好友 */
.user-myFriend h3 {
  color: #3a3f4a;
  line-height: 45px;
  font-size: 16px;
  background: #d7dde4;
  padding: 0 20px; }

.user-myFriend h3 i {
  color: #687580;
  width: 16px;
  height: 14px;
  vertical-align: middle; }

.user-myFriend .refresh {
  margin-right: 10px; }

.user-myFriend .friend-list {
  padding: 0 20px; }

.user-myFriend .friend-list li {
  padding: 15px 0;
  border-bottom: 1px solid #d2e6ea; }

.user-myFriend .friend-list li .friend-head {
  margin-right: 10px;
  float: left; }

.user-myFriend .friend-list li .friend-name img {
  margin-left: 4px; }

.user-myFriend .friend-list li span {
  color: #687580;
  font-size: 12px;
  margin-right: 10px; }

.user-myFriend .friend-list li:last-child {
  border: none; }

/* 第二块 */
.content-head {
  z-index: 1;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #d2e6ea; }

.content-right {
  float: right; }

.content-right p span:first-child {
  color: #16b2ce; }

.content-body {
  padding: 20px 0;
  text-align: center;
  font-size: 14px; }

.main-head p:first-child {
  margin-bottom: 10px; }

.main-head p:last-child {
  margin-bottom: 20px; }

.main-body {
  position: relative;
  text-align: center; }

.game-addr {
  margin-bottom: 20px;
  color: #ff8400; }

.content-game p {
  font-size: 12px;
  color: #00a686; }

.content-game div img,
.content-game div p,
.content-game div div {
  margin-bottom: 5px; }

.content-game div + div {
  margin-left: 10px; }

.wrap-vs {
  height: 109px;
  width: 100px; }

.wrap-vs div:first-child {
  height: 20px;
  vertical-align: middle; }

.usual-vs {
  height: 80px;
  line-height: 80px; }

.content-foot {
  margin: 0 auto 20px;
  text-align: center; }

.font-name-left {
  color: #2f2fd8; }

.font-name-right {
  color: #f32727; }

.game-intro {
  background: #fff5eb;
  color: #ff8400;
  margin-top: 0; }

.time-countdown {
  color: #16b2ce; }

.status {
  margin: 0 auto;
  width: 14px;
  height: 14px; }

.matching-user-img.vip {
  position: relative; }

.matching-user-img.vip:after {
  bottom: 5px;
  right: 0px;
  content: '';
  width: 14px;
  height: 14px;
  background: url("../img/lol-icon.png") no-repeat center;
  background-position: -206px -24px;
  position: absolute; }

/* 进入房间 */
.game-room {
  font-size: 12px; }

.font-capt {
  font-size: 12px;
  color: #16b2ce; }

.font-user-capt {
  color: #00a686;
  font-size: 14px; }

/* 比赛结果等待 */
.wrap-waiting {
  padding: 100px 0 0; }

.wrap-waiting p:first-child {
  margin-bottom: 20px; }

.btn-wrap {
  width: 260px;
  margin: 0 auto;
  padding: 40px 0 80px; }

.font18 {
  font-size: 18px;
  text-align: center; }

.font14 {
  font-size: 14px;
  color: #14b9d6;
  text-align: center; }

/* 比赛结果 */
.game-result-vs {
  height: 246px;
  line-height: 246px; }

.pt20 {
  padding-top: 20px; }

.btn-wrap-result {
  padding: 0 0 20px; }

.font-result {
  font-size: 14px;
  position: absolute;
  top: 20px;
  left: 335px; }

/* 查看比赛结果弹窗 */
.modal-wrap-gameResult {
  width: 762px; }

/* 选择输赢 */
.bg-choose {
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  bottom: 0;
  background: url("../img/lol_game-matching/bg-choose.jpg"); }

.bg-height {
  height: 417px;
  position: relative; }

.user-win a,
.user-lose a {
  display: inline-block; }

.user-win a img,
.user-lose a img {
  display: block;
  margin: 0 auto; }

.user-win a img:first-child,
.user-lose a img:first-child {
  margin-bottom: 10px; }

.user-choose {
  position: relative;
  padding: 134px 50px; }

/* 5.10修改 */
.statement-top h3 i {
  font-size: 12px;
  color: #d6ddea; }

.statement-top h3 i.active {
  color: #ff7e00; }

.score-style {
  position: relative; }

.score-style i {
  position: absolute;
  bottom: 0;
  right: -14px;
  font-size: 12px;
  color: #d6ddea; }

.selection select {
  width: 100%;
  height: 35px;
  background: #d7dde4;
  line-height: 35px;
  border: 1px solid #d7dde4;
  padding: 0 6px; }

.selection select option {
  width: 100%;
  height: 35px;
  background: #fff;
  line-height: 35px;
  padding: 0 6px; }

.selection select option + option {
  border-top: 1px solid #d7dde4; }

.status-green {
  color: #7fba2a; }

.status-red {
  color: #ee4e10; }

.status-grey {
  color: #687580; }

.user-myFriend .icon-user-group,
.user-myFriend .icon-addFriends {
  font-size: 20px; }

/* 5.11 */
.btn-addFriends {
  display: inline-block;
  padding: 6px 0;
  border-radius: 0;
  vertical-align: bottom; }

.deco-addFriends {
  width: 258px;
  vertical-align: bottom;
  height: 33px;
  margin-right: 8px;
  border-radius: 0;
  border: 1px solid #d7dde4; }

.form-inline .deco-addFriends {
  width: 258px; }

.modal-add-friend {
  min-height: 166px;
  padding-top: 50px; }

.modal-add-friend-list {
  width: 258px;
  border: 1px solid #d7dde4;
  margin: 10px 0 0 34px; }
  .modal-add-friend-list li + li {
    border-top: 1px solid #d7dde4; }
  .modal-add-friend-list li:hover {
    background: #efefef; }
    .modal-add-friend-list li:hover a {
      color: #14b9d6; }

.wrapper-friends-list {
  position: relative;
  width: 100%;
  height: 56px;
  padding: 8px 10px; }
  .wrapper-friends-list img {
    margin-right: 10px;
    display: block; }

.intro-friends {
  height: 40px;
  line-height: 40px;
  width: 78%;
  text-align: left; }
  .intro-friends p {
    max-width: 154px; }

.user-level {
  padding: 13px 0; }
  .user-level i {
    display: block;
    width: 14px;
    height: 14px;
    background: url("../img/lol-icon.png") -206px -24px; }

.block-add {
  position: absolute;
  right: 0;
  padding: 8px 10px; }
  .block-add a {
    color: #d7dde4; }

/*lol联赛默认弹窗宽度*/
.league-modal-wrap {
  width: 490px; }
